<template>
  <div class="route-info">
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <a-space>
        <a-button v-if="!isEditing" type="primary" @click="toggleEdit" :icon="h(EditOutlined)">
          编辑路线
        </a-button>
        <a-button
          v-if="showDeleteButton"
          danger
          @click="handleDelete"
          :loading="deleteLoading"
          :icon="h(DeleteOutlined)"
        >
          删除路线
        </a-button>
      </a-space>
    </div>

    <!-- 编辑模式 - 使用独立的编辑组件 -->
    <UpdateRouteForm
      v-if="isEditing"
      :route-data="routeData"
      @updated="handleRouteUpdated"
      @cancel="handleEditCancel"
    />

    <!-- 查看模式 - 文章形式展示 -->
    <div v-else class="route-article">
      <!-- 路线标题区域 -->
      <div class="article-header">
        <h1 class="article-title">{{ routeData.routeName || '未命名路线' }}</h1>
        <div class="article-meta">
          <div class="meta-item">
            <UserOutlined />
            <span>{{ routeData.userAccount || '未知作者' }}</span>
          </div>
          <div class="meta-item">
            <ClockCircleOutlined />
            <span>{{ routeData.spendTime || '未设置' }}</span>
          </div>
          <div class="meta-item">
            <CalendarOutlined />
            <span>适宜时间: {{ routeData.suitableTime || '未设置' }}</span>
          </div>
          <div class="meta-item" v-if="routeData.createTime">
            <span>发布时间: {{ formatDate(routeData.createTime) }}</span>
          </div>
        </div>
        <div class="article-tags" v-if="routeData.routeTags && routeData.routeTags.length > 0">
          <a-tag v-for="tag in routeData.routeTags" :key="tag" color="green" size="small">
            {{ tag }}
          </a-tag>
        </div>
      </div>

      <!-- 路线概述 -->
      <div class="article-content">
        <div class="content-section">
          <h3 class="section-title">
            <InfoCircleOutlined />
            路线概述
          </h3>
          <div class="section-content">
            <p class="route-description">{{ routeData.routeInfo || '暂无路线详情' }}</p>
          </div>
        </div>

        <!-- 沿途景点详情 -->
        <div class="content-section">
          <h3 class="section-title">
            <EnvironmentOutlined />
            沿途景点 ({{ (routeData.alongScenics || []).length }}个)
          </h3>
          <div class="section-content">
            <div
              v-if="routeData.alongScenics && routeData.alongScenics.length > 0"
              class="scenics-article"
            >
              <div
                v-for="(scenic, index) in routeData.alongScenics"
                :key="scenic.id"
                class="scenic-article-item"
              >
                <div class="scenic-header">
                  <div class="scenic-number">{{ index + 1 }}</div>
                  <h4 class="scenic-title">{{ scenic.scenicName }}</h4>
                </div>

                <div class="scenic-body">
                  <div
                    class="scenic-image-container"
                    v-if="scenic.coverImage || (scenic.scenicImages && scenic.scenicImages[0])"
                  >
                    <img
                      :src="
                        scenic.coverImage ||
                        (scenic.scenicImages && scenic.scenicImages[0]) ||
                        '/placeholder-scenic.jpg'
                      "
                      :alt="scenic.scenicName"
                      class="scenic-main-image"
                    />
                  </div>

                  <div class="scenic-text-content">
                    <p class="scenic-description">
                      {{ scenic.scenicBrief || '暂无景点简介。这里是一个美丽的景点，值得一游。' }}
                    </p>

                    <div class="scenic-details">
                      <div class="scenic-tags" v-if="scenic.tags && scenic.tags.length > 0">
                        <span class="tags-label">标签：</span>
                        <a-tag v-for="tag in scenic.tags" :key="tag" size="small" color="blue">
                          {{ tag }}
                        </a-tag>
                      </div>

                      <div v-if="scenic.tips" class="scenic-tips">
                        <BulbOutlined />
                        <span class="tips-label">游玩小贴士：</span>
                        <span class="tips-content">{{ scenic.tips }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="no-scenics">
              <a-empty description="暂无沿途景点信息" />
            </div>
          </div>
        </div>

        <!-- 路线总结 -->
        <div class="content-section">
          <h3 class="section-title">
            <InfoCircleOutlined />
            路线总结
          </h3>
          <div class="section-content">
            <div class="route-summary">
              <p>
                这条路线包含 <strong>{{ (routeData.alongScenics || []).length }}个景点</strong>，
                预计花费时间为 <strong>{{ routeData.spendTime || '未设置' }}</strong
                >， 建议在 <strong>{{ routeData.suitableTime || '任意时间' }}</strong> 前往游玩。
              </p>
              <p v-if="routeData.routeTags && routeData.routeTags.length > 0">
                路线特色：{{ routeData.routeTags.join('、') }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, h } from 'vue'
import { message, Modal } from 'ant-design-vue'
import {
  EditOutlined,
  DeleteOutlined,
  ClockCircleOutlined,
  CalendarOutlined,
  UserOutlined,
  InfoCircleOutlined,
  EnvironmentOutlined,
  BulbOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue'
import { deleteRoute } from '@/api/routeController'
import UpdateRouteForm from './UpdateRouteForm.vue'

// 定义 props 和 emits
interface Props {
  routeData: API.RouteVO
  showDeleteButton?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showDeleteButton: true,
})

const emit = defineEmits<{
  updated: [routeData: API.RouteVO]
  deleted: [routeId: number]
}>()

const isEditing = ref(false)
const deleteLoading = ref(false)

// 日期格式化函数
const formatDate = (dateString: string | undefined) => {
  if (!dateString) return '未知时间'
  try {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    })
  } catch {
    return '未知时间'
  }
}

// 切换编辑模式
const toggleEdit = () => {
  isEditing.value = true
}

// 处理路线更新成功
const handleRouteUpdated = (updatedRouteData: API.RouteVO) => {
  isEditing.value = false
  emit('updated', updatedRouteData)
}

// 处理取消编辑
const handleEditCancel = () => {
  isEditing.value = false
}

// 处理删除路线
const handleDelete = () => {
  if (!props.routeData.id) {
    message.error('路线ID无效，无法删除')
    return
  }

  Modal.confirm({
    title: '确认删除',
    icon: h(ExclamationCircleOutlined),
    content: `确定要删除路线"${props.routeData.routeName}"吗？此操作不可恢复。`,
    okText: '确定删除',
    okType: 'danger',
    cancelText: '取消',
    onOk: async () => {
      try {
        deleteLoading.value = true
        const response = await deleteRoute({ id: props.routeData.id! })

        if (response.data.code === 200) {
          message.success('路线删除成功！')
          emit('deleted', props.routeData.id!)
        } else {
          message.error('删除失败：' + (response.data.message || '未知错误'))
        }
      } catch (error) {
        console.error('删除路线失败:', error)
        message.error('删除失败，请稍后再试')
      } finally {
        deleteLoading.value = false
      }
    },
  })
}

// 防止 props 未使用警告（props 在模板中使用）
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _ = props
</script>

<style scoped>
.route-info {
  padding: 24px;
  max-height: 80vh;
  overflow-y: auto;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

/* 文章式布局样式 */
.route-article {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  color: #333;
}

.article-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid #f0f0f0;
}

.article-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  color: #666;
  font-size: 14px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-item .anticon {
  color: #1890ff;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-content {
  font-size: 16px;
}

.content-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title .anticon {
  color: #1890ff;
}

.section-content {
  margin-left: 28px;
}

.route-description {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin: 0;
  text-indent: 2em;
  text-align: justify;
}

/* 景点文章式展示 */
.scenics-article {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.scenic-article-item {
  border-left: 4px solid #1890ff;
  padding-left: 20px;
  margin-bottom: 32px;
}

.scenic-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.scenic-number {
  background: #1890ff;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
}

.scenic-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.scenic-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scenic-image-container {
  width: 100%;
  max-width: 500px;
  height: 250px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.scenic-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.scenic-main-image:hover {
  transform: scale(1.05);
}

.scenic-text-content {
  width: 100%;
}

.scenic-description {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
  margin: 0 0 16px 0;
  text-indent: 2em;
  text-align: justify;
}

.scenic-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scenic-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tags-label {
  font-weight: 500;
  color: #666;
  font-size: 14px;
}

.scenic-tips {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
}

.scenic-tips .anticon {
  color: #faad14;
  margin-top: 2px;
}

.tips-label {
  font-weight: 500;
  color: #d48806;
}

.tips-content {
  color: #614700;
  line-height: 1.5;
}

.route-summary {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
  padding: 20px;
  font-size: 15px;
  line-height: 1.7;
}

.route-summary p {
  margin: 0 0 12px 0;
}

.route-summary p:last-child {
  margin-bottom: 0;
}

.route-summary strong {
  color: #389e0d;
  font-weight: 600;
}

.no-scenics {
  text-align: center;
  padding: 40px 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .route-article {
    max-width: 100%;
  }

  .article-title {
    font-size: 24px;
  }

  .article-meta {
    flex-direction: column;
    gap: 8px;
  }

  .scenic-image-container {
    height: 220px;
  }

  .section-content {
    margin-left: 0;
  }
}
</style>
